<div class="container" style="padding: 1rem !important; margin-bottom: 1.5rem !important;">
    <div class="row">
        <div class="col-sm-12 col-md-12 col-lg-12 d-flex justify-content-between"
            style="border-bottom: 1px solid #d5d5d5;">
            <div class="my-3">
                <img src="./images/logo.png" style="width: auto !important; height: 40px !important;">
            </div>
            <div class="my-3 d-flex align-items-center">
                <div
                    style="background-color: #7C7BAD !important; color: #fff !important; font-weight: 600 !important; padding: 5px 15px 8px !important; margin: 0 5px !important;">
                    <i class="fa fa-check mr-1"></i>Community
                </div>
            </div>
        </div>
    </div>
</div>



<section class="container oe_container" style="padding: 3em 3.5rem; background-color: #fff ; border-radius: 15px;">
    <div class="row">
        <div class="col-lg-12 d-flex flex-column justify-content-center">
            <h1 class="text-center" style="font-family: Montserrat, 'sans-serif'; font-weight: 800; color:#0a1e2c;">
                Odoo 17 Highlight the required field if it is not filled.</h1>
            <p class="lead text-center" style="color: #102e42;">By implementing this widget, form fields designated as required will be visually emphasized, with both the field name and the input field itself highlighted to draw the user attention. Once the user fills in the required field, the widget dynamically restores the field name's color to its default state, ensuring a clear and responsive user experience.</p>
            <hr style="background-color: #0984e3; border: 2px solid #0984e3; width: 100px;" ;>
            <img class="mt-4" src="./images/highlight_required_field.jpg" height="auto" width="auto">
        </div>
    </div>
</section>


<div class="container oe_container">
    <div class="row" style="margin-top: 3rem;">
        <div class="col-lg-6" style="background-color: #fff;">
            <img src="./images/highlight_required_field_2.jpg" width="512px" height="auto">
        </div>
        <div class="col-lg-6 px-4 py-3" style="background-color: #fff;">
            <h4>Description</h4>
            <hr style="background-color: #0984e3; border: 2px solid #0984e3; width: 50px; margin-left: 0" ;>
            <p style="font-size: 1.1rem; line-height: 1.6; font-family: Roboto, 'sans-serif'; color: #636e72;">
               By implementing this widget, form fields designated as required will have both the field name and the field itself visually highlighted to draw the user's attention. Once the user completes the field by providing the necessary input, the widget will automatically reset the field name's color to its default state, ensuring a clear and intuitive interaction flow.
                
            </p>
        </div>

    </div>
</div>



<!-- FOOTER -->
<!-- Footer Section -->
<section class="container" style="margin: 5rem auto 2rem;">
    <div class="row" style="max-width:1540px;">
        <div class="col-lg-12 d-flex flex-column justify-content-center align-items-center">
            <h5 class="text-center" style="font-family: Montserrat, 'sans-serif';">Help?</h5>
            <hr style="background-color: #0984e3; border: 2px solid #0984e3; width: 50px;" ;>
        </div>
    </div>

    <!-- Contact Cards -->
    <div class="row d-flex justify-content-center align-items-center"
        style="max-width:1540px; margin: 0 auto 2rem auto;">

        <div class="col-lg-12" style="padding: 0rem 3rem 2rem; border-radius: 10px; margin-right: 3rem; ">

            <div class="row mt-4">
                <div class="col-lg-6">
                    <a href="mailto:info@openerp.hk" target="_blank" class="btn btn-block mb-2 deep_hover"
                        style="text-decoration: none;  background-color: #4d4d4d; color: #FFF;  border-radius: 4px;"><i
                            class="fa fa-envelope mr-2"></i>info@odoo.red</a>
                </div>
                <div class="col-lg-6">
                    <a href="https://api.whatsapp.com/send?phone=" target="_blank"
                        class="btn btn-block mb-2 deep_hover"
                        style="text-decoration: none;  background-color: #25D366; color: #FFF;  border-radius: 4px;"><i
                            class="fa fa-whatsapp mr-2"></i>WhatsApp</a>
                </div>
            </div>
        </div>

    </div>
    <!-- End of Contact Cards -->
</section>
<!-- Footer -->
<section class="oe_container" style="padding: 2rem 3rem 1rem;">
    <div class="row" style="max-width:1540px; margin: 0 auto; margin-right: 3rem; ">
        <!-- Logo -->
        <div class="col-lg-12 d-flex justify-content-center align-items-center" style="margin-top: 3rem;">
            <img src="https://cdn.odoo.red/static/index/img/logo.png" width="200px" height="auto" />
        </div>
        <!-- End of Logo -->
        <div class="col-lg-12">
            <hr
                style="margin-top: 3rem;background: linear-gradient(90deg, rgba(2,0,36,0) 0%, rgba(229,229,229,1) 33%, rgba(229,229,229,1) 58%, rgba(0,212,255,0) 100%); height: 2px; border-style: none;">
            <!-- End of Footer Section -->
        </div>
    </div>
</section>
